<template>
  <view class="list-container">
    <view class="list">
      <view class="item-container" @click="toBindPage">
        <view class="title-container">
          <view class="title">添加车牌</view>
        </view>
      </view>
      <view class="item-container" v-for="carNumber in carNumberList" :key="carNumber.id">
        <view class="title-container">
          <view class="title">{{ carNumber.carNumber }}</view>
        </view>
        <view class="action-container">
          <view class="edit-btn" @click="toEditPage(carNumber.id)">
            <i class="iconfont icon-xiugai"></i>
          </view>
          <view class="delete-btn" @click="deleteCarNumber(carNumber.id)">
            <i class="iconfont icon-chushaixuanxiang"></i>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      carNumberList: []
    };
  },
  mounted() {
    this.getCarNumberList();
  },
  methods: {
    toBindPage() {
      location.href = "/#/pages/parking/plate";
    },
    toPlusPage(){
      location.href = "/#/pages/parking/plate";
    },
    getCarNumberList() {
      this.$mainApi.apiGetCarNumberList().then((res) => {
        this.carNumberList = res.data.records;
      });
    },
    toEditPage(id: any) {
      location.href = "/#/pages/parking/plate?id=" + id;
    },
    deleteCarNumber(id: any) {
      uni.showModal({
        title: "删除车牌号",
        content: "确认删除车牌号码，此操作不可逆",
        success: (result: UniApp.ShowModalRes) => {
          if (result.confirm) {
            uni.showToast({ title: "正在删除车牌号" });
            this.$mainApi.apiDeleteCarNumber(id).then(() => {
              uni.hideToast();
              this.getCarNumberList();
            });
          }
        }
      });
    }
  }
})
</script>
<style scoped>
.list-container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}

.list-container .list {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.item-container {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 12px;
}

.item-container .title-container {
  flex-grow: 1;
  font-size: 16px;
}

.item-container .action-container {
  font-size: 16px;
  width: 70px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

.item-container .action-container .edit-btn {
  color: #007aff;
  margin-right: 20px;
}

.item-container .action-container .delete-btn {
  color: #dd524d;
}
.item-btn{
  width: 80%;
  margin-top: 50px;
}

</style>
